<template>
  <CommonCard title="累计用户数" :value="numberFormat(usersTotal)">
    <div ref="barChartRef" style="width:100%;height: 100%;"></div>
    <template #footer>
      <div class="footer">
        <span>日同比</span>&nbsp;
        <span class="emphasis">{{userGrowthLastDay}}%</span>&nbsp;
        <span class="increment"></span>&nbsp;&nbsp;
        <span>月同比</span>&nbsp;
        <span class="emphasis">{{userGrowthLastMonth}}%</span>&nbsp;
        <span class="decrement"></span>
      </div>
    </template>
  </CommonCard>
</template>

<script lang="ts">
export default {
  name: 'TotalUsers'
};
</script>
<script lang="ts" setup>
import { ref, onMounted,computed,watch } from 'vue';
import CommonCard from './CommonCard.vue';
import * as echarts from 'echarts';
import type { EChartsType } from 'echarts';
import { useReportDataStore } from '@/stores/reportData'
import useFormat from '@/hooks/useFormat'
const {numberFormat, moneyFormat} = useFormat()
const reportInfoStore = useReportDataStore()
const barChartRef = ref();

let barChart: EChartsType;

// 1. 使用计算属性处理映射过来的数据
// 累计用户数
const usersTotal = computed(()=>reportInfoStore.reportInfo.usersTotal)
const usersLastMonth = computed(()=>reportInfoStore.reportInfo.usersLastMonth)
const userGrowthLastDay = computed(()=>reportInfoStore.reportInfo.userGrowthLastDay)
const userGrowthLastMonth = computed(()=>reportInfoStore.reportInfo.userGrowthLastMonth)

const getOption = () => {
  return {
    xAxis: {
      min: 0,
      max: 100,
      show: false
    },
    yAxis: {
      show: false, // 不显示Y轴刻度线
      data: ['用户增长量']
    },
    tooltip: {},
    series: {
      type: 'bar',
      data: [78],
      // color:'orange',
      barWidth: 10,
      showBackground: true, // 显示背景
      itemStyle: {
        // 设置柱条的颜色
        color: 'orangered'
      },
      label: {
        // 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
        show: true,
        formatter: '|',
        position: 'right',
        color: 'orangered'
      }
    },
    grid: {
      left: 0,
      right: 0
    }
  };
};

// 1. 组件挂载完毕后 生成图形
onMounted(() => {
  barChart = echarts.init(barChartRef.value);
  barChart.setOption(getOption());
});
</script>

<style lang="scss" scoped>
.footer {
  display: flex;
  align-items: center;
}
</style>